<template>
	<view :class="['shortTabs', center ? 'flex_center' : '']">
		<view v-for="(item, index) in tabs" :key="index" :class="['tab_item', curTabs == index ? 'active_item' : '']" @tap="changeCurTab(index)">{{ item }}</view>
	</view>
</template>

<script>
export default {
	name: 'shortTabs',
	props: {
		tabs: {
			type: Array,
			default: () => []
		},
		curTabs: {
			type: Number,
			default: 0
		},
		center: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		changeCurTab(idx) {
			this.$emit('changeTab', idx);
		}
	}
};
</script>

<style lang="scss">
.flex_center {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tab_item {
		flex: none;
		margin-right: 0;
	}
}
.shortTabs {
	display: flex;
	align-items: center;
	.tab_item {
		font-size: 30rpx;
		color: #333;
		margin-right: 60rpx;
	}
	.active_item {
		font-weight: bold;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: -12rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 48rpx;
			height: 8rpx;
			background: #fed100;
			border-radius: 5rpx;
		}
	}
}
</style>
